<script setup>
import MenuFoldIcon from "./components/MenuFoldIcon.vue";
import BreadCrumb from "./components/BreadCrumb.vue";
import Notice from "./components/Notice.vue";
import FullScreen from "./components/FullScreen.vue";
import Reload from "./components/Reload.vue";
import UserCenter from "./components/UserCenter.vue";
import LangChange from "./components/LangChange.vue";
import NavTabs from "./NavTabs.vue";
</script>

<template>
  <div class="nav-bar">
    <MenuFoldIcon />
    <BreadCrumb />
    <div class="center-container"></div>
    <Notice />
    <Reload />
    <LangChange />
    <FullScreen />
    <UserCenter />
  </div>
  <NavTabs />
</template>

<style lang='less' scoped>
.nav-bar {
  height: 48px;
  display: flex;
  align-items: center;
  border-bottom: @border-width-base dashed @border-color-split;

  .center-container {
    flex: 1 1 auto;
  }
}

:deep(.action) {
  cursor: pointer;
  padding: 0 16px;
  line-height: 47px;
}
:deep(.action:hover) {
  color: @primary-color;
}
</style>